<template>
  <div class="wrapper">
    <el-radio-group v-model="selectedTab" size="mini">
      <el-radio-button label="上传审核"></el-radio-button>
      <el-radio-button label="每日模型审核"></el-radio-button>
      <el-radio-button label="黑名单"></el-radio-button>
    </el-radio-group>

    <div style="height: 20px"></div>

    <!-- 上传审核 -->
    <div class="upload-tab" v-show="selectedTab === '上传审核'">
      <el-form size="mini" inline>
        <el-form-item label="日期">
          <el-date-picker
            v-model="uploadTabParams.dateArr"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
            unlink-panels
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="作品ID">
          <el-input
            placeholder="请输入作品ID"
            v-model="uploadTabParams.cid"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="UID">
          <el-input
            placeholder="请输入UID"
            v-model="uploadTabParams.wid"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="作品状态">
          <el-select
            v-model="uploadTabParams.audit"
            clearable
            placeholder="请选择"
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="通过" value="0"></el-option>
            <el-option label="不通过" value="1"></el-option> </el-select
        ></el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearchUpload">搜索</el-button>
        </el-form-item>
      </el-form>
      <div class="upload-inner" v-loading="uploadIsLoading">
        <ul class="list">
          <li v-for="item of uploadList" :key="item.cid" class="item">
            <el-carousel height="200px">
              <el-carousel-item v-for="pic in item.pics" :key="pic">
                <img :src="pic" alt="" />
              </el-carousel-item>
            </el-carousel>
          </li>
        </ul>
      </div>
    </div>
    <!-- 每日模型审核 -->
    <div class="day-tab" v-show="selectedTab === '每日模型审核'">
      每日模型审核
    </div>
    <!-- 黑名单 -->
    <div class="black-tab" v-show="selectedTab === '黑名单'">黑名单</div>
  </div>
</template>

<script>
import { fetchMiniGameList } from "@/api";

export default {
  name: "ExamineConfig",
  data() {
    return {
      selectedTab: "上传审核",

      uploadTabParams: {
        dateArr: [],
        cid: "",
        wid: "",
        audit: "",

        index: 1,
        size: 24,
        type: 2,
        querywid: "",

        miniworld: "",
        mtype: "",
        label: "",
        publish: 1,
        time: "1601264120755,1601868920755",
      },
      uploadIsLoading: false,
      uploadList: [],
    };
  },
  methods: {
    async getMiniGameList(params = {}) {
      const res = await fetchMiniGameList(params);
      return res;
    },
    async handleSearchUpload() {
      const { dateArr = [], ...otherParams } = this.uploadTabParams;
      let [start_time = "", end_time = ""] = dateArr;
      start_time /= 1000;
      end_time /= 1000;

      this.uploadIsLoading = true;
      const res = await this.getMiniGameList({
        start_time,
        end_time,
        ...otherParams,
      });
      this.uploadIsLoading = false;

      const { products } = res.data;
      products.forEach((item) => {
        if (Array.isArray(item.pics) && item.pics.length === 0) {
          item.pics.push(item.thumb_url);
        }
      });

      this.uploadList = products;
    },
  },
};
</script>

<style lang="scss" scoped>
.upload-inner {
  .list {
    display: flex;
    flex-wrap: wrap;
  }
  .item {
    width: 300px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
}
</style>